<template>
  <div id="record">
  	<router-link to='/personal' class='record-icon'>
  		<div class='record-icon-circular'>
			<i class="icon iconfont icon-rili"></i>
  		</div>
  	</router-link>
	<div class='symptom record-subject'>
		<div class='subject-border'>
			<div class='subject-border-left'>
				<i class="icon iconfont icon-shentizhengzhuang"></i>
				<a>身体症状</a>
			</div>
			<div class='subject-border-right'>
				<i class="icon iconfont icon-iconfontarrows1"></i>
			</div>
		</div>
	  <RecordContent :symptom='symptom'/>
    <div class='recordcontent-input'>
      <input type="text"  v-model='valueone' placeholder='自定义'>
      <i class="icon iconfont icon-jiahao" @click='InputHenderOne'></i>
    </div>
	</div>
	<div class='target record-subject'>
		<div class='subject-border'>
			<div class='subject-border-left'>
				<i class="icon iconfont icon-mubiaobazi"></i>
				<a>今日目标</a>
			</div>
			<div class='subject-border-right'>
				<i class="icon iconfont icon-iconfontarrows1"></i>
			</div>	
		</div>
  	<RecordContentOne :symptom='contains'/>
    <div class='recordcontent-input'>
      <input type="text"  v-model='valuetwo'  placeholder='自定义'>
      <i class="icon iconfont icon-jiahao" @click='InputHenderTwo'></i>
    </div>
	</div>
	<BottomNav />
  </div>
</template>

<script>
import BottomNav from '../../BottomNav.vue'
import RecordContent from './RecordContent/RecordContent.vue'
import RecordContentOne from './RecordContent/RecordContentone.vue'
export default {
  name: 'Record',
  data () {
    return {
    	symptom:[
        {
          name:'嗓子疼',
          flag:true
        },
        {
          name:'手脚冰冷发麻',
          flag:true
        },
        {
          name:'口腔溃疡',
          flag:true
        },
        {
          name:'脚脖子疼',
          flag:true
        },
        {
          name:'声音沙哑肿瘤',
          flag:true
        },
        {
          name:'流行性感冒',
          flag:true
        }
      ],
    	contains:[
        {
          name:'吃早饭',
          flag:true
        },
        {
          name:'早睡早起',
          flag:true
        },
        {
          name:'按时吃药',
          flag:true
        },
        {
          name:'八杯水',
          flag:true
        },
        {
          name:'健走3000步',
          flag:true
        },
        {
          name:'排便',
          flag:true
        }
      ],
      valueone:'',
      valuetwo:''
    }
  },
  components:{
  	BottomNav,
  	RecordContent,
    RecordContentOne
  },
  methods:{
    InputHenderOne(){
      if(!this.valueone){
        return
      }
      this.symptom.push({name: this.valueone,flag:true})
      this.valueone = ''
    },
    InputHenderTwo(){
       if(!this.valuetwo){
        return
      }
      this.contains.push({name: this.valuetwo,flag:true})
      this.valuetwo = ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang='less' scoped>
#record{
  background-color: #f1f1f1;
  width: 100%;
  float: left;
  border-bottom:1rem solid #f1f1f1;
  .record-header{
  	width: 100%;
  	height: 1rem;
  	.record-header-box{
  		width: 50%;
  		height: 100%;
  		float: left;
  		text-align:center;
  		color: #717171;
  		font-size: 0.35rem;
  		.header-one{
			border-right:1px solid #717171;
      color:red;
	  	}
  		.header-i{
  			width: 100%;
  			height: 0.6rem;
  			margin-top: 0.2rem;
  			line-height:0.6rem;
  			i{
  				margin-left:20%;
  				font-size:0.55rem;
  				float: left;
  			}
  			a{
  				margin-left:0.1rem;
  				font-size:0.35rem;
  				float: left;
  			}
  		}
  	}
  }
  .record-icon{
  	width: 100%;
  	height: 1rem;
  	text-align:center;
	padding:0 44%;
  	box-sizing:border-box;
  	margin-top: 0.3rem; 
  	float: left;
  	.record-icon-circular{
  		width: 1rem;
  		height: 1rem;
  		border:1px solid #717171;
  		box-sizing:border-box;
  		text-align:center;
  		border-radius: 1rem;
  		line-height:1rem;
  		i{
  		font-size:0.7rem;
  		color: #717171;
  		}
  	}
  }
  .record-subject{
  	margin-top:0.3rem; 
  	width: 100%;
  	float: left;
  	.subject-border{
  		width: 100%;
  		height: 0.8rem;
  		border-bottom:1px solid #717171;
  		.subject-border-left{
  			width: 50%;
  			height: 100%;
			float: left;
			line-height:1rem;
			margin-left:8%;
			i{
				font-size:0.55rem;
			}
			a{
				font-size:0.35rem;
			}
  		}
  		.subject-border-right{
  			float: right;
  			line-height:1.2rem;
  			margin-right:8%;
  			i{
				font-size:0.4rem;
			}
  		}
  	}
    .recordcontent-input{
      width: 30%;
      height: 0.5rem;
      float: left;
      margin:0.4rem 35%;
      border:1px solid #717171;
      border-radius: 0.5rem;
      input{
        width: 75%;
        height: 0.5rem;
        box-sizing:border-box;
        float: left;
        margin-left:7%;
        background:#f1f1f1;
        font-size:0.3rem;
        outline:none;
        &:hover{
          border:0px solid black;
        }
      }
    }
  }
}



</style>
